<template>
	<view class="">
	
		<uni-popup ref="popupTips"  type="center" mask-background-color="rgba(0,0,0,0)" >
			<view class="interTips">
				<text class="fontThree" >请下载app观看</text>
			</view>
		</uni-popup>
	</view>

</template>
<script>

export default {
	data() {
		return {
			showBar:false,
			followed:false,
			showStart: true,
			showCount: false,
			countDown: 3,
			filterFileName: 'yinghong',
			frontCamera: true,
			showModal: null,
			windowHeight: 0,
			showHour: false,
			showSend: true,
			roomIdS: [666, 888, 686, 868],
			roomId: 868,
			players: [],
			hisId: null,
			userName: 'yangang',
			role: 20,
			beatyStyle: 1,
			mode: 'me', //大小窗口显示模式
			enable: false,
			lianmaiEnable: false,
			scene: 1,
			appId: appId,
			appKey: appKey,
			isFront: true,
			pullUrl: '',
			pullId:'1656905246011641857'
		};
	},
	onLoad(params) {
		// uni.$http.get(`/app/anchor/lives/getPullUrl/${this.pullId}`).then((res) => {
		// 	console.log('拉流', res);
		// 	this.pullUrl = res.data;
		// });
		
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
	},
	onReady() {
		this.$refs.popupTips.open();
		// this.startPlay();
	},
	onNavigationBarButtonTap() {
		this.stopPlay()
		uni.navigateBack({
			delta: 1,
			animationType: 'pop-out',
			animationDuration: 200
		});
	},
	onUnload() {
		console.log(55555);
		this.stopPlay()
		
	},
	onHide() {
		console.log(666666);
		this.stopPlay()
		
	},
	methods: {
		//查看购物车
		handleCart(){},
		//点赞
		handleUp(){},
		//更多按钮
		handleMore() {},
		//关注
		handleFollow() {
			this.followed = true;
			uni.showToast({
				title: 'Follow succeeded added to follow',
				icon: 'none'
			});
		},
		closeModal() {
			this.showModal = null;
		},
		//退出房间
		exitRoom() {
			uni.navigateBack(1);
			this.$refs.maxTxPlayer.stopPlay();
		},
		//打开小时榜
		hourChart() {
			this.$refs.popup.open();
		},
		//发消息
		openSetMessage() {
			this.$refs.chatRoom.open();
		},
		onPlay(e) {
			var result = e.detail;
			console.log(JSON.stringify(result));
		},
		//开始播放
		startPlay() {
			this.$refs.maxTxPlayer.startPlay();
			this.$refs.maxTxPlayer.startPlayWithUrl(this.pullUrl, 0);
		},
		//停止播放
		stopPlay() {
			this.$refs.maxTxPlayer.pause();
		},
		//继续播放
		resumuPlay() {
			this.$refs.maxTxPlayer.resume();
		},
		
	},
	beforeCreate: function () {
		// #ifdef APP-PLUS-NVUE
		const domModule = weex.requireModule('dom');
		domModule.addRule('fontFace', {
			fontFamily: 'iconfont',
			src: 'url("' + 'file:/' + plus.io.convertLocalFileSystemURL('_www/static/iconfont.ttf') + '")'
		});
		// #endif
	}
};
</script>

<style lang="scss" scoped>
.maxTxPusher {
	z-index: -1;
}
/* #ifndef APP-PLUS-NVUE */
/deep/.u-drawer__scroll-view[data-v-52d4ddd1] {
	padding-top: 40rpx;
}
/deep/.u-drawer-content-visible[data-v-52d4ddd1] {
	height: 100% !important;
}
/deep/.u-drawer[data-v-52d4ddd1] {
	top: unset;
}
/* #endif */
.container {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: #1d2422;
}
.goodsLink {
	position: absolute;
	top: 678rpx;
	right: 216rpx;
	.circle {
		width: 28rpx;
		height: 28rpx;		
		border-radius: 100%;		
		overflow: hidden
	}
	.goods {
		width: 128rpx;
		height: 184rpx;
		background: #f6f9fa;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		flex-direction: column;
		
		justify-content: center;
		align-items: center;
		.goodsImage {
			width: 108rpx;
			height: 108rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			overflow: hidden;
			margin-bottom: 10rpx;
		}
	}
	.triangle {
		border-width: 8px;
		border-style: solid;;
		width: 0rpx;
		height: 0rpx;
		border-color:transparent ;
		border-bottom-color: #ffffff;
		margin: 0 auto;
	}
}

.maxTxPlayView {
	width: 750rpx;
	background-color: #111111;
	position: fixed;
	top: 0;
	right: 0;
}
.message-box {
	width: 344rpx;
	height: 84rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 42rpx 42rpx 42rpx 42rpx;
	margin: 20rpx;
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	.text-box {
		font-size: 30rpx;
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
		font-weight: 400;
		color: #acb1c0;
		margin-left: 5rpx;
	}
}
.bottom-box {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 120rpx;
	width: 750rpx;

	.more-box {
		margin: 0px 40rpx 0 210rpx;
	}
}
.bottom-list {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.hour-chart {
	margin: 0 50rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: fixed;
	top: 200rpx;
}
.chat-box {
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 36rpx;
	height: 72rpx;
	padding-right: 14rpx;
}
.ui-txt-white {
	color: #ffffff;
	font-size: 26rpx;
}
.chat-icon {
	width: 36rpx;
	height: 36rpx;
	margin: 0 14rpx 0 24rpx;
}
.ui-col {
	display: flex;
	flex-direction: column;
}
.input {
	border-radius: 8rpx;
}
.fun-group {
	width: 84rpx;
	height: 84rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.start-box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 280rpx;
	width: 750rpx;
	.startItem {
		width: 500rpx;
		height: 120rpx;
		background-color: rgba(41, 52, 208, 0.6);
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.start {
			color: #ffffff;
			font-size: 44rpx;
		}
	}
}
.ui-txt-message {
	color: #d5d5d5;
}

.open-message {
	margin: 0 40rpx;
}

.fun-icon {
	width: 52rpx;
	height: 52rpx;
}

.chat-li {
	display: flex;
	margin-bottom: 8rpx;
	.avatar {
		width: 88rpx;
		height: 88rpx;
		margin-right: 16rpx;
	}
	.chat {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.chatName {
			color: rgba(255, 255, 255, 0.5);
			font-size: 26rpx;
		}
		.chatMessage {
			color: #ffffff;
			font-size: 30rpx;
		}
	}
}
.blue-name {
	position: absolute;
	left: 20rpx;
	top: 15rpx;
	color: #6ebcff;
	font-size: 24rpx;
}

.chatMessage {
	padding: 15rpx 26rpx 14rpx 20rpx;
	border-radius: 26rpx;
	background-color: rgba(0, 0, 0, 0.4);
	lines: 2;
	text-overflow: ellipsis;
	font-size: 24rpx;
	color: #fff;
}

.live-message {
	width: 316rpx;
	height: 80rpx;
	background: rgba(255, 255, 255, 0.3183);
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	flex-direction: row;
	display: flex;
	align-items: center;
}
.follow {
	width: 123rpx;
	height: 56rpx;
	background: #2934d0;
	border-radius: 28rpx 28rpx 28rpx 28rpx;
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	margin-left: 5rpx;
	.followBox {
		font-size: 24rpx;
		color: #ffffff;
	}
}
.head-box {
	z-index: 9;
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0rpx;
	margin-top: 104rpx;
	margin-left: 44rpx;
	margin-bottom: 44rpx;
}
.exitButton {
	position: fixed;
	top: 104rpx;
	right: 20rpx;
	width: 118rpx;
	height: 52rpx;
	border-radius: 8rpx;
	text-align: right;
}
.moreButton {
	position: fixed;
	top: 104rpx;
	right: 100rpx;
	width: 118rpx;
	height: 52rpx;
	border-radius: 8rpx;
	text-align: right;
}
.followed {
	background-color: rgba(145, 144, 154, 1);
}
.live-head {
	width: 68rpx;
	height: 68rpx;
	border-radius: 50%;
	margin: 6rpx 14rpx 6rpx 6rpx;
}

.number {
	font-size: 22rpx;
	opacity: 0.56;
}

.roomName {
	lines: 1;
	text-overflow: ellipsis;
}

.audienceList {
	width: 296rpx;
}

.audience {
	background-color: green;
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}

/* 设置美颜 */
.share {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 32rpx 32rpx 0 0;
	background-color: #1e2833;
}

.share-top {
	border-radius: 32rpx 32rpx 0 0;
	height: 98rpx;
	padding-left: 53rpx;
	background-color: #0e1924;
}
.watchNumber {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
}
.share-top-item {
	margin-right: 61rpx;
	color: #2a5ff8;
}

.share-item {
	padding: 0 53rpx;
	height: 98rpx;
}

.close-scene {
	width: 36rpx;
	height: 36rpx;
	margin: 31rpx 18rpx 0 0;
}

.top {
	padding: 0 31rpx;
	background-color: #121f2c;
}

.modal {
	background-color: #0e1924;
}

.ui-bg-blue {
	background-color: green;
}
.hourList {
	width: 750rpx;
	height: 970rpx;
	padding-top: 40rpx;
	background: #ffffff;
	border-radius: 60rpx 60rpx 0rpx 0rpx;
	position: absolute;
	bottom: 0;
	.hourItem {
		.line-box {
			display: flex;
			justify-content: center;
		}
		.itemInfo {
			display: flex;
			align-items: center;
			flex-direction: row;
			margin: 26rpx 0;
			.rank {
				font-size: 36rpx;
				font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
				font-weight: 400;
				color: #ff8900;
				margin: 0 48rpx;
			}
			.userInfo {
				display: flex;
				align-items: center;
				flex-direction: row;
				margin-right: 126rpx;
				.userAvatar {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					padding: 1px;
					opacity: 1;
					border: 1px solid #ff8900;
					overflow: hidden;
					margin-right: 26rpx;
					.avatarImage {
						width: 108rpx;
						height: 108rpx;
					}
				}
				.user-name {
					font-size: 34rpx;
					font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
					font-weight: 400;
					color: #0a1f44;
				}
			}
			.flow-count {
				font-size: 24rpx;
				font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
				font-weight: 400;
				color: #0a1f44;
			}
		}
		.line {
			background-color: #f2f3f5;
			width: 534rpx;
			height: 2rpx;
			opacity: 1;
		}
	}
}
.foot-content {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column-reverse;

	position: fixed;
	bottom: 350rpx;
	left: 0;
	right: 0;

	height: 500rpx; // 聊天区最高显示的高度
	overflow: hidden;

	padding-top: 20rpx;
	padding-right: 40rpx;
	padding-bottom: 20rpx;
	padding-left: 40rpx;
}
.countDownBox {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	position: fixed;
	top: 600rpx;
}
.countDown {
	border-radius: 100%;
	width: 228rpx;
	height: 228rpx;
	background: rgba(11, 11, 11, 0.3452);
	display: flex;
	justify-content: center;
	align-items: center;

	.count {
		font-size: 120rpx;
		font-family: DINAlternate-Bold-Regular, DINAlternate-Bold;
		font-weight: 400;
		color: #ffffff;
	}
}
.interTips{			
		background: rgba(0,0,0,0.75);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		padding: 50rpx 80rpx;
	}
	.fontThree{
		font-size: 24rpx;
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
		font-weight: 400;
		color: #FFFFFF;
		text-indent:2em;
	}
</style>
